<template>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style="width: 600px;height:400px;">

  </div>
</template>

<script>
  import {getDeptEcharts} from"../../api/user"

  var echarts = require('echarts');
  export default {
    name: 'Index',
    data(){
      return{
        xAxisData:null,
        seriesData:null
      }
    },
    mounted(){
      this.getDeptEchart();
    },
    methods:{
      drowLine(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: '部门人数统计图'
          },
          tooltip: {},
          legend: {
            data: ['全部', '我的']
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            data: this.xAxisData,
          },
          yAxis: {},
          series: [
            {
              name: '全部',
              type: 'bar',
              data: this.seriesData
            },
            {
              name: '我的',
              type: 'bar',
              data: this.seriesData
            }],
        });
      },
      getDeptEchart(){
        getDeptEcharts()
          .then(response => {
              console.log(response.data);
              this.seriesData=response.data.data.seriesData;
              this.xAxisData=response.data.data.xAxisData;
              this.drowLine();
          })
          .catch(erro => {
            console.log("请求失败");
          })
      },
    }
  }
</script>

<style scoped>

</style>
